<template>
    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="userName" label="姓名" />
        <el-table-column prop="unitName" label="单位" />
        <el-table-column prop="deptName" label="部门" />
        <el-table-column prop="phonenumber" label="手机号" />
    </el-table>

    <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize" :total="total"
        @pagination="getList" />
</template>

<script setup>
import { listUser } from "@/api/system/user.js";
import PageEnum from "@/enum/PageEnum.js";

// 根据传入的部门 ID，获取该部门下的所有用户列表
const { depId } = defineProps(['depId'])
const total = ref(0)
const loading = ref(false)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})

const tableData = ref([])
const deptId = ref('')


// 获取部门列表数据
const getList = async () => {
    loading.value = true
    const queryParams = {
        ...paging.value,
        deptId: deptId.value
    }
    const res = await listUser(queryParams)
    total.value = res.total;
    tableData.value = res.rows
    console.log('res', res)
    loading.value = false
}

watch(() => depId, async (newValue, oldValue) => {
    console.log('depId', newValue)
    deptId.value = newValue
    await getList()
}, {
    immediate: true
})


// 部门列表选择数据
const handleSelectionChange = (data) => {
    console.log(data.map(item => {
        return {
            label: item.userName,
            value: item.userId
        }
    }))
}
</script>

<style scoped lang="scss"></style>